<template>
  <u-container :hasSearch="false">
    <template #container>
      <u-form
        :schema="editFormSchema"
        :dataSource="permissionForm"
        ref="editForm"
      >
        <template #footer>
          <u-button
            type="primary"
            color="#28a745"
            @click="handleOnClickToSubmit"
          >
            提交
          </u-button>
          <u-button type="primary" @click="handleOnClickToBack">
            返回
          </u-button>
        </template>
      </u-form>
    </template>
  </u-container>
</template>

<script>
import UICLI from "components/ui-cli";
import UIContainer from "basicLayoutComponent/UIContainer";

import Index from "./index";

import { set2Form, showMess } from "utils/Util";

import {
  getPermissionById,
  savePermission,
  updatePermissionById,
  getPermissionList,
} from "@/access/api/permission/index";

export default {
  name: "PermissionEdit",
  components: {
    UButton: UICLI.UButton,
    UForm: UICLI.UForm,
    UContainer: UIContainer,
  },
  data() {
    return {
      query: {
        id: -1,
        env: "add",
      },
      editFormSchema: Index.editFormSchema,
      permissionForm: {
        id: 0,
        parentId: "0",
        systematicNo: 0,
        permissionName: "",
        permissionType: "DIR",
        permissionLink: "",
        permissionIcon: "",
        permissionKey: "",
        permissionComponent: "",
        permissionDisplayModel: 0,
        permissionIsHome: 0,
        permissionIsOuter: 0,
        permissionIsDisplaySlide: 0,
        permissionDisplayRuleWay: 1,
        permissionIsTop: 0,
        orderNum: 1,
      },
      metaVo: [
        {
          key: "subKey",
          value: "",
        },
        {
          key: "title",
          value: "",
        },
        {
          key: "subTitle",
          value: "",
        },
      ],
    };
  },
  methods: {
    init() {
      this.handleOnChangeToUpdateUI(null, 'DIR');
      this.initParams();
      this.initFormSourceData();
      this.initFormListener();
    },
    initParams() {
      this.query.id = this.$route.params.id;
      this.query.env = this.$route.params.env;
    },
    initFormSourceData() {
      // 获取所有节点
      this.getPermissionList();
    },
    getPermissionList() {
      let _res = new Array({ id: "0", permissionName: "父节点" });
      getPermissionList().then((res) => {
        if (res) {
          _res = _res.concat(res);
          this.editFormSchema.groups[1].fields[0].sourceData = res;
        }
        this.editFormSchema.groups[0].fields[2].sourceData = _res;
      });
    },
    initFormListener() {
      this.editFormSchema.groups[1].fields[0].change = (e) =>
        this.handleOnChangeToSubKey(e);
      this.editFormSchema.groups[1].fields[1].change = (e) =>
        this.handleOnChangeToTitle(e);
      this.editFormSchema.groups[1].fields[2].change = (e) =>
        this.handleOnChangeToSubTitle(e);
      this.editFormSchema.groups[0].fields[0].change = (e) =>
        this.handleOnChangeToUpdateUI(e, '');
    },
    handleOnChangeToSubKey(value) {
      this.metaVo[0].value = value;
    },
    handleOnChangeToTitle(e) {
      this.metaVo[1].value = e.target.value;
    },
    handleOnChangeToSubTitle(e) {
      this.metaVo[2].value = e.target.value;
    },
    handleOnChangeToUpdateUI(e, val) {
      let _type;
      if(val) {
        _type = val;
      } else {
        _type = e.target.value
      }
      switch(_type){
        case "DIR":
          this.initShow([5,6]);
          // this.editFormSchema.groups[0].fields[5].show = false
          // this.editFormSchema.groups[0].fields[6].show = false
          break;
        case "MENU":
          this.initShow([5,8,12]);
          // this.editFormSchema.groups[0].fields[5].show = false
          // this.editFormSchema.groups[0].fields[8].show = false
          // this.editFormSchema.groups[0].fields[12].show = false
          break;
        case "BUTTON":
          this.initShow([4,6,7,8,9,11,12]);
          // this.editFormSchema.groups[0].fields[4].show = false
          // this.editFormSchema.groups[0].fields[6].show = false
          // this.editFormSchema.groups[0].fields[7].show = false
          // this.editFormSchema.groups[0].fields[8].show = false
          // this.editFormSchema.groups[0].fields[9].show = false
          // this.editFormSchema.groups[0].fields[11].show = false
          // this.editFormSchema.groups[0].fields[12].show = false

          break;
      }
    },
    initShow(indexs) {
      this.editFormSchema.groups[0].fields.forEach((item, index) => {
        item.show = true;
        if(indexs.indexOf(index) != -1) {
          item.show = false
        }
      })
    },
    getPermissionById() {
      if (-1 != this.query.id) {
        getPermissionById({
          id: this.query.id,
        }).then((res) => {
          if (res) {
            this.handleOnChangeToUpdateUI(null, res.permissionType);
            set2Form(this.permissionForm, res);
            if (res.permissionExtra) {
              this.metaVo = JSON.parse(res.permissionExtra);
              this.metaVo.forEach((item) => {
                this.permissionForm[item.key] = item.value;
              });
            }
          }
        });
      }
    },
    handleOnClickToSubmit() {
      this.$refs.editForm.$refs.form
        .validate()
        .then(() => {
          if (this.permissionForm.id) {
            // update
            if (-1 != this.query.id) {
              updatePermissionById({
                id: this.query.id,
                permissionVo: this.permissionForm,
                metaVoList: this.metaVo
              }).then((res) => {
                if (res) {
                  showMess("修改成功");
                  this.handleOnClickToBack();
                }
              });
            }
          } else {
            // save
            savePermission({
              permissionVo: this.permissionForm,
              metaVoList: this.metaVo
            }).then((res) => {
              if (res) {
                showMess("保存成功");
                this.handleOnClickToBack();
              }
            });
          }
        })
        .error((error) => {
          console.log("error", error);
        });
    },
    handleOnClickToBack() {
      this.$router.push("/list/permission");
    },
  },
  created() {
    this.init();
    this.getPermissionById();
  },
};
</script>

<style lang="less" scoped>
</style>